.split-line-wrapper {
  height: 0.186666666666667rem;
  background: #f5f5f5;
}
html,
body {
  width: 100%;
  background: #fff;
  overflow-x: hidden;
}
html .detail-wrapper,
body .detail-wrapper {
  padding-top: 1.653333333333333rem;
}
html .detail-wrapper .header,
body .detail-wrapper .header {
  position: fixed;
  top: 0;
  left: 0;
  background: #fcfcfc;
  width: 8.933333333333334rem;
  height: 1.333333333333333rem;
  line-height: 1.333333333333333rem;
  z-index: 9;
  padding: 0rem 0.533333333333333rem;
  font-size: 0;
}
html .detail-wrapper .header .back-wrapper,
body .detail-wrapper .header .back-wrapper {
  width: 1.333333333333333rem;
  padding-left: 0.4rem;
  background: url("../img/back-icon.png") no-repeat left center;
  background-size: 0.226666666666667rem 0.4rem;
  font-size: 0.426666666666667rem;
  font-family: SimHei;
}
html .detail-wrapper .header .title,
body .detail-wrapper .header .title {
  width: 5.466666666666667rem;
  font-size: 0.426666666666667rem;
  vertical-align: top;
  font-family: SimHei;
}
html .detail-wrapper .book-detail-wrapper,
body .detail-wrapper .book-detail-wrapper {
  padding: 0 0.533333333333333rem;
  font-size: 0;
}
html .detail-wrapper .book-detail-wrapper .left-wrapper,
body .detail-wrapper .book-detail-wrapper .left-wrapper {
  width: 2.986666666666667rem;
  height: 3.786666666666667rem;
  margin-right: 0.426666666666667rem;
  box-shadow: 1px 1px 10px 1px #ccc;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper,
body .detail-wrapper .book-detail-wrapper .right-wrapper {
  font-size: 0.346666666666667rem;
  color: #999;
  vertical-align: top;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .book-name,
body .detail-wrapper .book-detail-wrapper .right-wrapper .book-name {
  width: 5.466666666666667rem;
  font-size: 0.48rem;
  color: #000;
  margin-bottom: 0.293333333333333rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .words-and-status,
body .detail-wrapper .book-detail-wrapper .right-wrapper .words-and-status {
  margin-bottom: 0.24rem;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .words-and-status .status,
body .detail-wrapper .book-detail-wrapper .right-wrapper .words-and-status .status {
  margin-left: 0.266666666666667rem;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .read-count-p,
body .detail-wrapper .book-detail-wrapper .right-wrapper .read-count-p {
  margin-bottom: 0.293333333333333rem;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .read-count-p .read-count,
body .detail-wrapper .book-detail-wrapper .right-wrapper .read-count-p .read-count {
  color: #f17c7c;
  font-size: 0.426666666666667rem;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .add-shelf,
body .detail-wrapper .book-detail-wrapper .right-wrapper .add-shelf {
  margin-bottom: 0.293333333333333rem;
  font-size: 0.4rem;
  color: #000;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .add-shelf.added,
body .detail-wrapper .book-detail-wrapper .right-wrapper .add-shelf.added {
  display: none;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .add-shelf .add-shelf-icon,
body .detail-wrapper .book-detail-wrapper .right-wrapper .add-shelf .add-shelf-icon {
  padding-left: 0.346666666666667rem;
  background: url("../img/add-shelf-icon.png") no-repeat center center;
  background-size: 0.346666666666667rem 0.426666666666667rem;
  margin-right: 0.266666666666667rem;
}
html .detail-wrapper .book-detail-wrapper .right-wrapper .cat-list li,
body .detail-wrapper .book-detail-wrapper .right-wrapper .cat-list li {
  font-size: 0.293333333333333rem;
  margin-right: 0.16rem;
  padding: 0.08rem 0.106666666666667rem;
  color: #fff;
  background: #f69797;
  border-radius: 0.08rem;
}
html .detail-wrapper .book-desc-wrapper,
body .detail-wrapper .book-desc-wrapper {
  margin-top: 0.266666666666667rem;
  padding: 0 0.533333333333333rem;
  font-size: 0;
}
html .detail-wrapper .book-desc-wrapper .desc-detail,
body .detail-wrapper .book-desc-wrapper .desc-detail {
  width: 7.52rem;
  margin-right: 0.586666666666667rem;
  font-size: 0.373333333333333rem;
  color: #999;
}
html .detail-wrapper .book-desc-wrapper .desc-detail p,
body .detail-wrapper .book-desc-wrapper .desc-detail p {
  text-align: justify;
}
html .detail-wrapper .book-desc-wrapper .desc-detail p.limit,
body .detail-wrapper .book-desc-wrapper .desc-detail p.limit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
html .detail-wrapper .book-desc-wrapper .extend,
body .detail-wrapper .book-desc-wrapper .extend {
  font-size: 0.373333333333333rem;
  color: #000;
  text-decoration: underline;
  vertical-align: bottom;
}
html .detail-wrapper .read-and-gift-wrapper,
body .detail-wrapper .read-and-gift-wrapper {
  margin-top: 0.64rem;
  margin-bottom: 0.4rem;
  padding: 0 0.533333333333333rem;
  font-size: 0;
}
html .detail-wrapper .read-and-gift-wrapper .read-btn-wrapper,
body .detail-wrapper .read-and-gift-wrapper .read-btn-wrapper {
  font-size: 0.4rem;
  width: 5.306666666666667rem;
  height: 0.96rem;
  margin-right: 0.293333333333333rem;
  background: #fb7575;
  color: #fff;
}
html .detail-wrapper .read-and-gift-wrapper .read-btn-wrapper div,
body .detail-wrapper .read-and-gift-wrapper .read-btn-wrapper div {
  height: 100%;
}
html .detail-wrapper .read-and-gift-wrapper .read-btn-wrapper div .icon-and-start,
body .detail-wrapper .read-and-gift-wrapper .read-btn-wrapper div .icon-and-start {
  width: 2.4rem;
  height: 0.506666666666667rem;
  margin: 0 auto;
  padding-top: 0.226666666666667rem;
}
html .detail-wrapper .read-and-gift-wrapper .read-btn-wrapper div .icon-and-start .read-icon,
body .detail-wrapper .read-and-gift-wrapper .read-btn-wrapper div .icon-and-start .read-icon {
  width: 0.453333333333333rem;
  height: 0.533333333333333rem;
  background: url("../img/read-icon.png") no-repeat center center;
  background-size: 0.453333333333333rem 0.453333333333333rem;
  vertical-align: top;
  margin-right: 0.293333333333333rem;
}
html .detail-wrapper .read-and-gift-wrapper .gift-btn-wrapper,
body .detail-wrapper .read-and-gift-wrapper .gift-btn-wrapper {
  font-size: 0.4rem;
  width: 3.333333333333333rem;
  height: 0.933333333333333rem;
  position: relative;
  vertical-align: top;
}
html .detail-wrapper .read-and-gift-wrapper .gift-btn-wrapper:after,
body .detail-wrapper .read-and-gift-wrapper .gift-btn-wrapper:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #fb7575;
  content: '';
}
html .detail-wrapper .read-and-gift-wrapper .gift-btn-wrapper .icon-and-gift,
body .detail-wrapper .read-and-gift-wrapper .gift-btn-wrapper .icon-and-gift {
  width: 2.4rem;
  height: 0.506666666666667rem;
  margin: 0 auto;
  margin-top: 0.226666666666667rem;
  color: #fb7575;
}
html .detail-wrapper .read-and-gift-wrapper .gift-btn-wrapper .icon-and-gift .gift-icon,
body .detail-wrapper .read-and-gift-wrapper .gift-btn-wrapper .icon-and-gift .gift-icon {
  width: 0.453333333333333rem;
  height: 0.533333333333333rem;
  background: url("../img/gift-icon.png") no-repeat center center;
  background-size: contain;
  vertical-align: top;
  margin-right: 0.293333333333333rem;
}
html .detail-wrapper .buy-whole-wrapper p,
body .detail-wrapper .buy-whole-wrapper p {
  width: 8.933333333333334rem;
  margin-left: 0.533333333333333rem;
  margin-bottom: 0.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.4rem;
}
html .detail-wrapper .buy-whole-wrapper .sell-book,
body .detail-wrapper .buy-whole-wrapper .sell-book {
  color: #f65757;
  background: #ffeded;
  position: relative;
  display: none;
}
html .detail-wrapper .buy-whole-wrapper .sell-book:after,
body .detail-wrapper .buy-whole-wrapper .sell-book:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ff9191;
  content: '';
}
html .detail-wrapper .buy-whole-wrapper .has-bought,
body .detail-wrapper .buy-whole-wrapper .has-bought {
  display: none;
  color: #fff;
  background: #ccc;
}
html .detail-wrapper .catalog-wrapper,
body .detail-wrapper .catalog-wrapper {
  padding: 0 0.533333333333333rem;
}
html .detail-wrapper .catalog-wrapper .head,
body .detail-wrapper .catalog-wrapper .head {
  margin-top: 0.4rem;
}
html .detail-wrapper .catalog-wrapper .head .left-wrapper,
body .detail-wrapper .catalog-wrapper .head .left-wrapper {
  font-size: 0.426666666666667rem;
  color: #f14a4a;
  padding-left: 0.266666666666667rem;
  border-left: 0.08rem solid #f14a4a;
}
html .detail-wrapper .catalog-wrapper .head .right-wrapper,
body .detail-wrapper .catalog-wrapper .head .right-wrapper {
  width: 4.16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.373333333333333rem;
  color: #666;
}
html .detail-wrapper .catalog-wrapper .four-chapter,
body .detail-wrapper .catalog-wrapper .four-chapter {
  margin-top: 0.533333333333333rem;
}
html .detail-wrapper .catalog-wrapper .four-chapter li,
body .detail-wrapper .catalog-wrapper .four-chapter li {
  font-size: 0.373333333333333rem;
  margin-bottom: 0.533333333333333rem;
}
html .detail-wrapper .catalog-wrapper .more-catalog,
body .detail-wrapper .catalog-wrapper .more-catalog {
  margin-bottom: 0.4rem;
}
html .detail-wrapper .catalog-wrapper .more-catalog p,
body .detail-wrapper .catalog-wrapper .more-catalog p {
  width: 2.133333333333333rem;
  margin: 0 auto;
  color: #f86161;
  font-size: 0.373333333333333rem;
}
html .detail-wrapper .catalog-wrapper .more-catalog p .more-catalog-icon,
body .detail-wrapper .catalog-wrapper .more-catalog p .more-catalog-icon {
  padding: 0.093333333333333rem 0.12rem;
  background: url("../img/more-icon.png") no-repeat center center;
  background-size: contain;
  margin-left: 0.266666666666667rem;
}
html .detail-wrapper .like-wrapper,
body .detail-wrapper .like-wrapper {
  padding: 0.533333333333333rem 0.533333333333333rem 0rem 0.533333333333333rem;
}
html .detail-wrapper .like-wrapper .head,
body .detail-wrapper .like-wrapper .head {
  margin-bottom: 0.506666666666667rem;
}
html .detail-wrapper .like-wrapper .head .title,
body .detail-wrapper .like-wrapper .head .title {
  font-size: 0.426666666666667rem;
  color: #f86161;
  padding-left: 0.266666666666667rem;
  border-left: 0.08rem solid #f14a4a;
}
html .detail-wrapper .like-wrapper .head .more,
body .detail-wrapper .like-wrapper .head .more {
  font-size: 0.346666666666667rem;
  color: #666;
  height: 0.586666666666667rem;
  line-height: 0.586666666666667rem;
}
html .detail-wrapper .like-wrapper .head .more .more-icon,
body .detail-wrapper .like-wrapper .head .more .more-icon {
  width: 0.32rem;
  height: 0.56rem;
  background: url("../img/refresh-icon.png") no-repeat center center;
  background-size: 0.32rem 0.32rem;
  margin-left: 0.133333333333333rem;
  vertical-align: top;
}
html .detail-wrapper .like-wrapper .like-content,
body .detail-wrapper .like-wrapper .like-content {
  font-size: 0;
}
html .detail-wrapper .like-wrapper .like-content li,
body .detail-wrapper .like-wrapper .like-content li {
  margin: 0 0.453333333333333rem 0.533333333333333rem 0;
  vertical-align: top;
}
html .detail-wrapper .like-wrapper .like-content li:nth-child(3n),
body .detail-wrapper .like-wrapper .like-content li:nth-child(3n) {
  margin-right: 0rem;
}
html .detail-wrapper .like-wrapper .like-content li div,
body .detail-wrapper .like-wrapper .like-content li div {
  width: 2.666666666666667rem;
  height: 3.386666666666667rem;
  box-shadow: 1px 1px 10px 1px #ccc;
}
html .detail-wrapper .like-wrapper .like-content li p,
body .detail-wrapper .like-wrapper .like-content li p {
  font-size: 0.346666666666667rem;
  margin-top: 0.266666666666667rem;
  width: 2.666666666666667rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html .detail-wrapper .present-wrapper,
body .detail-wrapper .present-wrapper {
  padding: 0.533333333333333rem 0.533333333333333rem 0rem 0.533333333333333rem;
}
html .detail-wrapper .present-wrapper .head,
body .detail-wrapper .present-wrapper .head {
  margin-bottom: 0.506666666666667rem;
}
html .detail-wrapper .present-wrapper .head .title,
body .detail-wrapper .present-wrapper .head .title {
  font-size: 0.426666666666667rem;
  color: #f86161;
  padding-left: 0.266666666666667rem;
  border-left: 0.08rem solid #f14a4a;
}
html .detail-wrapper .present-wrapper .head .present,
body .detail-wrapper .present-wrapper .head .present {
  font-size: 0.373333333333333rem;
  color: #f86161;
  height: 0.586666666666667rem;
  line-height: 0.586666666666667rem;
}
html .detail-wrapper .present-wrapper .head .present .present-icon,
body .detail-wrapper .present-wrapper .head .present .present-icon {
  width: 0.373333333333333rem;
  height: 0.533333333333333rem;
  background: url("../img/present-icon.png") no-repeat center center;
  background-size: 0.373333333333333rem 0.373333333333333rem;
  margin-right: 0.133333333333333rem;
  vertical-align: top;
}
html .detail-wrapper .present-wrapper .present-content,
body .detail-wrapper .present-wrapper .present-content {
  padding: 0rem 0.533333333333333rem;
  font-size: 0;
}
html .detail-wrapper .present-wrapper .present-content ul li,
body .detail-wrapper .present-wrapper .present-content ul li {
  padding: 0.4rem 0 0.533333333333333rem 0;
  position: relative;
}
html .detail-wrapper .present-wrapper .present-content ul li:after,
body .detail-wrapper .present-wrapper .present-content ul li:after {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  border-top: 1px solid #ebebeb;
  content: '';
}
html .detail-wrapper .present-wrapper .present-content ul li .head-img-wrapper,
body .detail-wrapper .present-wrapper .present-content ul li .head-img-wrapper {
  width: 0.88rem;
  height: 0.88rem;
  vertical-align: top;
  margin-right: 0.266666666666667rem;
}
html .detail-wrapper .present-wrapper .present-content ul li .head-img-wrapper img,
body .detail-wrapper .present-wrapper .present-content ul li .head-img-wrapper img {
  width: 100%;
  border-radius: 50%;
}
html .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper,
body .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper {
  font-size: 0.293333333333333rem;
  color: #999;
}
html .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper .data-time,
body .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper .data-time {
  margin-top: 0.133333333333333rem;
}
html .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper .present-detail,
body .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper .present-detail {
  font-size: 0.373333333333333rem;
  color: #333;
  margin-top: 0.586666666666667rem;
}
html .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper .present-detail .present-item,
body .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper .present-detail .present-item {
  color: #f86161;
  padding: 0 0.133333333333333rem;
}
html .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper .present-detail .shit-icon,
body .detail-wrapper .present-wrapper .present-content ul li .present-detail-wrapper .present-detail .shit-icon {
  padding: 0.266666666666667rem 0.533333333333333rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 0.133333333333333rem;
}
html .detail-wrapper .present-wrapper .present-content .more-present,
body .detail-wrapper .present-wrapper .present-content .more-present {
  margin: 0.533333333333333rem 0;
}
html .detail-wrapper .present-wrapper .present-content .more-present p,
body .detail-wrapper .present-wrapper .present-content .more-present p {
  width: 2.133333333333333rem;
  margin: 0 auto;
  color: #f86161;
  font-size: 0.373333333333333rem;
}
html .detail-wrapper .present-wrapper .present-content .more-present p .more-present-icon,
body .detail-wrapper .present-wrapper .present-content .more-present p .more-present-icon {
  padding: 0.093333333333333rem 0.12rem;
  background: url("../img/more-icon.png") no-repeat center center;
  background-size: contain;
  margin-left: 0.266666666666667rem;
}
html .detail-wrapper .back-top-wrapper,
body .detail-wrapper .back-top-wrapper {
  position: fixed;
  right: 0.266666666666667rem;
  bottom: 1.333333333333333rem;
  width: 0.933333333333333rem;
  height: 0.933333333333333rem;
  background: url("../img/back-top-icon.png") no-repeat center center;
  background-size: 0.933333333333333rem 0.933333333333333rem;
  z-index: 9;
  opacity: 0;
}
html .detail-wrapper .select-present-mask,
body .detail-wrapper .select-present-mask {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 10;
  display: none;
}
html .detail-wrapper .select-present-mask .select-present-top-mask,
body .detail-wrapper .select-present-mask .select-present-top-mask {
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
html .detail-wrapper .select-present-mask .select-present-wrapper,
body .detail-wrapper .select-present-mask .select-present-wrapper {
  right: 0;
  bottom: 0;
  width: 100%;
  height: 8.213333333333333rem;
  background: #fff;
  z-index: 11;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list {
  font-size: 0;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list li,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list li {
  position: relative;
  display: inline-block;
  width: 3.333333333333333rem;
  height: 3.333333333333333rem;
  position: relative;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list li:after,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list li:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ececec;
  content: '';
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list li .border-line,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list li .border-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.261333333333333rem;
  height: 3.261333333333333rem;
  border: 0.026666666666667rem solid #f86161;
  display: none;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list li:after,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list li:after {
  border-top: none;
  border-left: none;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list li:nth-child(3n):after,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list li:nth-child(3n):after {
  border-right: none;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list li .present-item,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list li .present-item {
  font-size: 0.32rem;
  color: #999;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list li .present-item .present-img,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list li .present-item .present-img {
  width: 1.861333333333333rem;
  height: 1.52rem;
  margin: 0.266666666666667rem 0.736rem 0.266666666666667rem 0.736rem;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-list li .present-item .present-name,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-list li .present-item .present-name {
  margin-bottom: 0.186666666666667rem;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-btn-wrapper,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-btn-wrapper {
  padding: 0 0.533333333333333rem;
  font-size: 0;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-btn-wrapper .rest-coin,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-btn-wrapper .rest-coin {
  width: 4.213333333333333rem;
  height: 2.106666666666666rem;
  line-height: 1.733333333333333rem;
  font-size: 0.346666666666667rem;
  color: #333;
  vertical-align: top;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-btn-wrapper .recharge-btn,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-btn-wrapper .recharge-btn {
  color: #f86161;
  font-size: 0.373333333333333rem;
  height: 2.106666666666666rem;
  line-height: 1.706666666666667rem;
  padding: 0 0.266666666666667rem;
}
html .detail-wrapper .select-present-mask .select-present-wrapper .present-btn-wrapper .present-btn,
body .detail-wrapper .select-present-mask .select-present-wrapper .present-btn-wrapper .present-btn {
  width: 2.533333333333333rem;
  height: 0.933333333333333rem;
  line-height: 0.933333333333333rem;
  background: #fe7676;
  font-size: 0.4rem;
  color: #fff;
  border-radius: 0.48rem;
  margin-left: 0.586666666666667rem;
  vertical-align: top;
  margin-top: 0.346666666666667rem;
}
